<script setup>
import { computed, defineEmits, ref } from 'vue'
import SettingNavi from '@/components/attendanceComponents/SettingPage/SettingNavi.vue'
import NeedAttendancePeopleRangeValue from '@/components/attendanceComponents/SettingPage/GroupSetting/NeedAttendancePeopleRangeValue.vue'
import NeedAttendanceDepartmentValue from '@/components/attendanceComponents/SettingPage/GroupSetting/NeedAttendanceDepartmentValue.vue'

const emits = defineEmits(['goback'])
const goback = () => {
  emits('goback')
}

const content = ref('')
const buttonDisabled = computed(() => {
  return content.value.length === 0
})

const tapDelete = () => {
  alert('tapDelete')
}

const popup1 = ref(null)
const popup2 = ref(null)
const popup3 = ref(null)
const handlePopup1 = (index) => {
  popup1.value[index].open()
}
const handlePopup2 = (index) => {
  popup2.value[index].open()
}

const showValuePage = ref(1)
const handlePopup3 = (index) => {
  if (conditionType.value === '') {
    uni.showToast({
      title: '请先选择条件类型',
      icon: 'none',
    })
    return
  }
  if (conditionType.value === '部门/人员') {
    showValuePage.value = 3
  }
  if (conditionType.value === '工作城市') {
    pickerTitle.value = '工作城市'
    columns.value = cityColumns.value
    picker.value[index].open()
  }
  if (conditionType.value === '人员类型') {
    pickerTitle.value = '人员类型'
    columns.value = peopleColumns.value
    picker.value[index].open()
  }
  if (conditionType.value === '职级') {
    pickerTitle.value = '职级'
    columns.value = positionColumns.value
    picker.value[index].open()
  }
}

const handleConfirm1 = (index) => {
  popup1.value[index].close()
}
const handleConfirm2 = (index) => {
  popup2.value[index].close()
}

const picker = ref(null)
const columns = ref()
const confirm = (e) => {
  console.log(e)
}

const pickerTitle = ref('')
// todo 改为省市联动
const cityColumns = ref([['中国', '美国', '日本']])
const peopleColumns = ref([['正式', '实习', '外包']])
const positionColumns = ref([['待定', '待定', '待定']])

const conditionType = ref('')

const conditionList = ref([{ title: '条件1' }, { title: '条件2' }, { title: '条件3' }])
</script>

<template>
  <!--  主页面-->
  <view v-if="showValuePage === 1">
    <SettingNavi :iconFont="'icon-shuaxin'" title="需要打卡的人员" @pageIndexChange="goback" />
    <view class="container">
      <view class="sectionClass">
        <uni-section class="textClass" title="人员范围" @click="showValuePage = 2">
          <template v-slot:right>
            <view>
              <text>自定义范围</text>
              <i class="iconfont icon-youjiantou"></i
            ></view>
          </template>
        </uni-section>
      </view>
      <view class="sectionClass">
        <view v-for="(item, index) in conditionList">
          <uni-section :title="item.title" title-color="#86909c" @click="">
            <template v-slot:right>
              <view>
                <text style="color: #165dff; margin-right: 16rpx" @tap="tapDelete">删除</text>
              </view>
            </template>
            <template v-slot:default>
              <view class="innerSectionContainer">
                <uni-section class="innerSection" title="条件类型" @click="handlePopup1(index)">
                  <template v-slot:right>
                    <view class="textClass">
                      <text>请选择</text>
                      <i class="iconfont icon-youjiantou"></i
                    ></view>
                    <uni-popup ref="popup1" class="popupClass" type="bottom">
                      <uv-radio-group v-model="conditionType" shape="circle">
                        <view style="width: 100%">
                          <uni-section title="部门/人员">
                            <template v-slot:right>
                              <uv-radio name="部门/人员" />
                            </template>
                          </uni-section>
                          <uni-section title="工作城市">
                            <template v-slot:right>
                              <uv-radio name="工作城市" />
                            </template>
                          </uni-section>
                          <uni-section title="人员类型">
                            <template v-slot:right>
                              <uv-radio name="人员类型" />
                            </template>
                          </uni-section>
                          <uni-section title="职级">
                            <template v-slot:right>
                              <uv-radio name="职级" />
                            </template>
                          </uni-section>
                          <view class="blankClass"></view>
                          <text class="confirmButton" @tap="handleConfirm1(index)">确定</text>
                        </view>
                      </uv-radio-group>
                    </uni-popup>
                  </template>
                </uni-section>
                <uni-section class="innerSection" title="操作符" @click="handlePopup2(index)">
                  <template v-slot:right>
                    <view class="textClass">
                      <text>请选择</text>
                      <i class="iconfont icon-youjiantou"></i
                    ></view>
                    <uni-popup ref="popup2" class="popupClass" type="bottom">
                      <uv-radio-group v-model="conditionType" shape="circle">
                        <view style="width: 100%">
                          <uni-section title="包含">
                            <template v-slot:right>
                              <uv-radio name="1" />
                            </template>
                          </uni-section>
                          <uni-section title="不包含">
                            <template v-slot:right>
                              <uv-radio name="2" />
                            </template>
                          </uni-section>
                          <view class="blankClass"></view>
                          <text class="confirmButton" @tap="handleConfirm2(index)">确定</text>
                        </view>
                      </uv-radio-group>
                    </uni-popup>
                  </template>
                </uni-section>
                <uni-section class="innerSection" title="值" @click="handlePopup3(index)">
                  <template v-slot:right>
                    <view class="textClass">
                      <text>请选择</text>
                      <i class="iconfont icon-youjiantou"></i
                    ></view>
                    <uv-picker
                      ref="picker"
                      :columns="columns"
                      :title="pickerTitle"
                      @confirm="confirm"
                    ></uv-picker>
                  </template>
                </uni-section>
              </view>
            </template>
          </uni-section>
        </view>
        <!--        <uni-section title="条件2" title-color="#86909c" @click="">-->
        <!--          <template v-slot:right>-->
        <!--            <view>-->
        <!--              <text style="color: #165dff; margin-right: 16rpx" @tap="tapDelete"-->
        <!--                >删除-->
        <!--              </text>-->
        <!--            </view>-->
        <!--          </template>-->
        <!--          <template v-slot:default>-->
        <!--            <view class="innerSectionContainer">-->
        <!--              <uni-section class="innerSection" title="条件类型" @click="">-->
        <!--                <template v-slot:right>-->
        <!--                  <view class="textClass">-->
        <!--                    <text>请选择</text>-->
        <!--                    <i class="iconfont icon-youjiantou"></i-->
        <!--                  ></view>-->
        <!--                </template>-->
        <!--              </uni-section>-->
        <!--              <uni-section class="innerSection" title="操作符" @click="">-->
        <!--                <template v-slot:right>-->
        <!--                  <view class="textClass">-->
        <!--                    <text>请选择</text>-->
        <!--                    <i class="iconfont icon-youjiantou"></i-->
        <!--                  ></view>-->
        <!--                </template>-->
        <!--              </uni-section>-->
        <!--              <uni-section class="innerSection" title="值" @click="">-->
        <!--                <template v-slot:right>-->
        <!--                  <view class="textClass">-->
        <!--                    <text>请选择</text>-->
        <!--                    <i class="iconfont icon-youjiantou"></i-->
        <!--                  ></view>-->
        <!--                </template>-->
        <!--              </uni-section>-->
        <!--            </view>-->
        <!--          </template>-->
        <!--        </uni-section>-->
        <view class="addCondition">
          <!--          <iconpark-icon fill="#165DFF" name="plus-circle"></iconpark-icon>-->
          <view style="display: flex; justify-content: center">
            <image src="@/static/icon/plus-circle.svg" style="width: 32rpx; height: 32rpx"></image>
          </view>
          <text>添加条件</text>
        </view>
      </view>
      <button class="buttonClass" @click="clickSave">保存</button>
    </view>
  </view>
  <!--  人员范围选值-->
  <view v-if="showValuePage === 2">
    <NeedAttendancePeopleRangeValue @goback="showValuePage = 1" />
  </view>
  <!--  人员/部门 选值-->
  <view v-if="showValuePage === 3">
    <NeedAttendanceDepartmentValue @goback="showValuePage = 1" />
  </view>
</template>

<style lang="scss" scoped>
.container {
  margin: 40rpx 32rpx 0rpx 32rpx;
}

.sectionClass {
  border-radius: 16rpx;
  margin-top: 32rpx;
  overflow: hidden;
}

.textClass {
  color: #86909c;
  font-family: 'PingFang SC';
  font-size: 28rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 39.2rpx;
}

.innerSectionContainer {
  margin: 0 32rpx 0 32rpx;
  background-color: #f7f8fa;
  border-radius: 16rpx;
  overflow: hidden;
}

.innerSection {
  background-color: #f7f8fa;
}

.addCondition {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 32rpx;
  padding-bottom: 32rpx;
  color: #165dff;
  background-color: #fff;
}

.buttonClass {
  display: flex;
  //width: 686rpx;
  height: 72rpx;
  justify-content: center;
  align-items: center;
  background: #165dff;
  border-radius: 16rpx;
  color: #fff;
  font-size: 32rpx;
  margin-top: 40rpx;
  overflow: hidden;
}

.popupClass {
  background-color: #ffffff;
  //height: 1556rpx;
  width: 100%;
}

.blankClass {
  display: block;
  height: 16rpx;
  background-color: #e5e6eb;
}

.confirmButton {
  display: flex;
  padding: 32rpx;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  background: var(---white, #fff);
  color: #1d2129;
}
</style>
